<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/login.css" rel="stylesheet" />
		
		<style type="text/css">
			#login_btn{
				background: url(static_img/login.png) no-repeat -10px -10px;
				background-size: 100px 100px;
				height: 82px;
				border: none;
				border-radius: 41px;
				outline: none;
				margin-top: -15px;
			}
			.form_input{
				position: absolute;
				top: 60px;
				width: 90%;
				left: 5%;
				border-radius: 10px;
				outline: none;
				padding: 0;
				height: 310px;
			}
			#forword{
				position: absolute;
				top: 359px;
				margin: 20px;
			}
		</style>
		
	</head>

	<body>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<div class="mui-content">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">登录</h1>
			</header>
			<form class="mui-input-group form_input">
				<div class="mui-input-row">
					<label>手机</label>
					<input id="u_tel" type="text" class="mui-input-clear email" placeholder="请输入手机" name="email"/>
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input id="u_password" type="password" class="mui-input-password password" placeholder="请输入密码" name="email" id="" value="" />
				</div>
				<div class="mui-input-row">
					<label>验证码</label>
					<input id="u_tel_code" type="text" class="mui-input-clear email" placeholder="请输入验证码" name="email" id="" value="" />
				</div>
				<div class="code_img">
					<img src='static_img/test.png' id="code_img">
				</div>
				
				<div class="mui-input-row myswitch">
					<label>记住我</label>
					<div class="mui-switch mui-active mui-switch-blue" id="mySwitch">
						<div class="mui-switch-handle"></div>
					</div>
				</div>
				<div class="mui-button-row submit">
					<button id="login_btn" type="button" class="mui-btn mui-btn-primary"></button>
					<!-- <button id="exit_btn" type="button" class="mui-btn mui-btn-danger">取消</button> -->
				</div>
			</form>
			<div id="forword">
				<a class="f1">忘记密码</a>
				<a class="f2">去注册</a>
			</div>
		</div>
		
		<script type="text/javascript">
			
			mui.init({
				beforeback: function() {　　 
					//获得父页面的webview
					var list = plus.webview.currentWebview().opener();　　
					//触发父页面的自定义事件(refresh),从而进行刷新
					mui.fire(list, 'refresh');
					//返回true,继续页面关闭逻辑
					return true;
				}
			});
			
			
			mui.plusReady(function () {
				document.getElementById('u_tel').value = localStorage.getItem('local_tel');
				document.getElementById('u_password').value = localStorage.getItem('local_password')
				
				var old_back = mui.back;
				mui.back = function() {
				    // 获取目标口窗口对象
				    var target = plus.webview.getWebviewById('mine_page.html');
				    // var target = plus.webview.getWebviewById("my/my.html");
				    // 执行相应的事件
				    mui.fire(target, 'customEvent', {});
				    // 执行关闭
				    old_back();
				};
				
				// 主动检测是否合法
				var a1 = document.getElementById("u_tel").value
				var re1 = /^1[3-9][0-9]{9}$/
				var bro = document.getElementById("u_tel").parentNode.firstElementChild;
				if(re1.test(a1)){
					bro.style.background = 'url(images/input_success.png) no-repeat 80px 10px';
					bro.style.backgroundSize = '20px 20px'
				}else{
					bro.style.background = 'url(images/input_error.png) no-repeat 80px 10px';
					bro.style.backgroundSize = '20px 20px'
				}
				
				var a2 = document.getElementById("u_password").value
				var re2 = /^[A-Za-z][A-Za-z0-9\.]{5,}$/
				var bro = document.getElementById("u_password").parentNode.firstElementChild;
				if(re2.test(a2)){
					bro.style.background = 'url(images/input_success.png) no-repeat 80px 10px';
					bro.style.backgroundSize = '20px 20px'
				}else{
					bro.style.background = 'url(images/input_error.png) no-repeat 80px 10px';
					bro.style.backgroundSize = '20px 20px'
				}
				
				
				
				document.getElementById("u_tel").addEventListener('input',function(){
					var re1 = /^1[3-9][0-9]{9}$/
					var bro = this.parentNode.firstElementChild;
					if(re1.test(this.value)){
						bro.style.background = 'url(images/input_success.png) no-repeat 80px 10px';
						bro.style.backgroundSize = '20px 20px'
					}else{
						bro.style.background = 'url(images/input_error.png) no-repeat 80px 10px';
						bro.style.backgroundSize = '20px 20px'
					}
				});
				
				
				document.getElementById("u_tel_code").addEventListener('input',function(){
					var re1 = /^[a-zA-Z0-9]{4}$/
					var bro = this.parentNode.firstElementChild;
					if(re1.test(this.value)){
						bro.style.background = 'url(images/input_success.png) no-repeat 80px 10px';
						bro.style.backgroundSize = '20px 20px'
					}else{
						bro.style.background = 'url(images/input_error.png) no-repeat 80px 10px';
						bro.style.backgroundSize = '20px 20px'
					}
				});
				
				
				document.getElementById("u_password").addEventListener('input',function(){
					var re2 = /^[A-Za-z][A-Za-z0-9\.]{5,}$/
					var bro = this.parentNode.firstElementChild;
					if(re2.test(this.value)){
						bro.style.background = 'url(images/input_success.png) no-repeat 80px 10px';
						bro.style.backgroundSize = '20px 20px'
					}else{
						bro.style.background = 'url(images/input_error.png) no-repeat 80px 10px';
						bro.style.backgroundSize = '20px 20px'
					}
				});
				
				
				document.getElementById('code_img').addEventListener('tap', function(){
					var tel = document.getElementById('u_tel').value;
					var re3 = /^1[3-9][0-9]{9}$/
					if(tel == null || !re3.test(tel)){
						mui.toast('请先填写正确的手机号再刷新验证码');
						return
					}
					this.src = localStorage.getItem('request_url') + 'cost/get_code_img/?tel='+ tel +'&p=' + Math.random()
				})
				
				
			})
			// 登录按钮
			document.getElementById('login_btn').addEventListener('tap',function(){
				this.setAttribute('disabled','false');
				var tel = document.getElementById('u_tel').value;
				var tel_code = document.getElementById('u_tel_code').value;
				var password = document.getElementById('u_password').value;
				var re3 = /^1[3-9][0-9]{9}$/
				var re2 = /^[A-Za-z][A-Za-z0-9\.]{5,}$/
				var re1 = /^[A-Za-z0-9]{4}$/
				if(!re3.test(tel) || !re2.test(password) || !re1.test(tel_code)){
					mui.toast('请填写完整且符合规则的信息')
					this.removeAttribute('disabled');
					return;
				}else{
					var isActive = document.getElementById("mySwitch").classList.contains("mui-active");
					if(isActive){
						localStorage.setItem('local_tel',tel);
						localStorage.setItem('local_password',password);
					}else{
						localStorage.removeItem('local_tel');
						localStorage.removeItem('local_password');
					}
					// mui.alert(localStorage.getItem('request_url')+"cost/user/login/")
					mui.ajax(localStorage.getItem('request_url')+"cost/user/login/",{
					    data:"tel=" + tel + "&password=" + password + "&tel_code=" + tel_code,
					    dataType:'json',
					    type:'post',  
					    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
					    timeout:3000,  
					    success:function show(e){
							
							var uid = e.data.token;
							var username = e.data.username;
							var login_img = e.data.img_load;

							localStorage.setItem("uid",uid);
							localStorage.setItem("login_name", username);
							localStorage.setItem('login_img', login_img);
							// mui.alert(va.img_load);
							// 调用银行卡接口
							account();
							mui.back();
							
						},  
					    error:function(xhr,type,errorThrown){
							// mui.toast(typeof xhr.responseText)
							var data = JSON.parse(xhr.responseText)
							if (data.code==0){
								mui.toast('😢登录失败,检查您输入信息是否正确')
							}else{
								mui.toast(data.msg)
								mui.toast(data.data.rule,{ duration:'long'})
							}
							document.getElementById('code_img').src = localStorage.getItem('request_url') + 'cost/get_code_img/?tel='+ tel +'&p=' + Math.random()
					    }  
					});
					this.removeAttribute('disabled');
				};
				
			});
			// 银行卡接口
			function account(){
				// mui.alert('我被调用了')
				mui.ajax(localStorage.getItem('request_url')+ "cost/user/show_my_account/?token="+localStorage.getItem('uid'), {
				    data:"token=" + localStorage.getItem('uid'),
				    dataType:'json',  
				    type:'POST',  
				    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
				    timeout:2000,  
				    success:function show(e){
						var account_list = []
						var account_id = {}
						for(i=0;i<e.data.length;i++){
							// mui.alert(1)
							var dict = {'title': e.data[i].account_name + '          ' + e.data[i].account_num}
							account_list.push(dict);
							account_id[e.data[i].account_num] = e.data[i].account_id;
						}
						localStorage.setItem('account_list',JSON.stringify(account_list));
						localStorage.setItem('account_id',JSON.stringify(account_id));
						mui.toast('😃更新完成...');
					},  
				    error:function(xhr,type,errorThrown){
						mui.toast('😃更新完成...');
				    }  
				});
			};
			
			
			// 跳转到注册页面
			document.getElementsByClassName('f2')[0].addEventListener('tap',function(){
				// mui.alert(11)
				mui.openWindow({
					url : 'register.html',
					id : 'register.html'
				});
			});
			document.getElementsByClassName('f1')[0].addEventListener('tap',function(){
				// mui.alert(11)
				mui.openWindow({
					url : 'find_my_password.html',
					id : 'find_my_password.html'
				});
			});
			
		</script>
	</body>

</html>
